<template>
  <app-container>
    <app-block>
      <el-tabs
        v-model="searchForm.status"
        @tab-click="tabChange"
        class="wp100 vm"
      >
        <el-tab-pane
          :label="item.label"
          :name="item.value"
          v-for="(item, index) in INVOICESTATUS_TAB"
          :key="index"
        />
      </el-tabs>
      <zm-form :model="searchForm" ref="searchForm" inline>
        <zm-form-item prop="number">
          <zm-input
            class="w300"
            v-model="searchForm.number"
            placeholder="请输入销售单号/发票号码/发票代码"
          />
        </zm-form-item>
        <zm-form-item prop="startTime">
          <zm-date-picker
            :target="searchForm"
            start-key="startTime"
            end-key="endTime"
          />
        </zm-form-item>
        <zm-form-item label prop="invoiceType">
          <zm-data-select
            v-model="searchForm.invoiceType"
            k1="invoiceType"
            placeholder="发票类型"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="customerName" v-if="!statusBool">
          <zm-input
            class="w300"
            v-model="searchForm.customerName"
            placeholder="关联客户"
          />
          <!-- <zm-data-select
            v-model="searchForm.customerId"
            api="invoiceCustomerList"
            :params="{status: searchForm.status}"
            placeholder="关联客户"
            class="w200"
          ></zm-data-select> -->
        </zm-form-item>
        <zm-form-item label prop="saleId">
          <zm-data-select
            v-model="searchForm.saleId"
            api="getSaleList"
            placeholder="所属业务员"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="openingInvoice">
          <zm-data-select
            v-model="searchForm.openingInvoice"
            api="getOpeningInvoice"
            placeholder="开票人员"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="onSearch" t="search"></zm-button>
          <zm-button @click="onReset" t="reset"></zm-button>
        </zm-form-item>
      </zm-form>
    </app-block>
    <app-block>
      <div class="mb10">
        <zm-button t="add" @click="onAdd">
          添加
        </zm-button>
        <zm-button type="warning" @click="onGetFields">
          导出
        </zm-button>
        <zm-export
          ref="export"
          :api="exportApi()"
          type="warning"
          :params="exportForm"
          v-show="false"
        ></zm-export>
        <zm-button t="del" @click="onDel({id: selectedNos, status: searchForm.status})">
          删除
        </zm-button>
      </div>
      <zm-table-data
        :data="tableParams.data"
        ref="multipleTable"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :mutilple="true"
        @selection-change="saveIds"
        config-header
        :show-page="true"
        :store-key="SOTRE_KEY_FINANCIAL_INVOICE_LIST"
        :head-min="5"
        :head-max="15"
        v-if="!loading"
      ></zm-table-data>
      <new-panel
        v-if="newParams.visible"
        v-model="newParams.visible"
        :obj="newParams.obj"
        @after="loadList"
      ></new-panel>
      <info-entry
        v-if="entryParams.visible"
        v-model="entryParams.visible"
        :obj="entryParams.obj"
        @after="loadList"
      ></info-entry>
      <detail-invoice
        v-if="detailParams.visible"
        v-model="detailParams.visible"
        :obj="detailParams.obj"
        @after="loadList"
      ></detail-invoice>

      <detail-container
        v-if="extendDetailParams.visible"
        v-model="extendDetailParams.visible"
        :id="extendDetailParams.id"
        :business-id="extendDetailParams.id"
        :is-show-btn="false"
        :type="extendDetailParams.type"
      ></detail-container>

      <export-panel
        :api="exportField()"
        v-if="exportParams.visible"
        v-model="exportParams.visible"
        @after="onExport"
        type="7"
      ></export-panel>
    </app-block>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import {exportInvoice,
  getpagelist,
  recycleInvoice,
  exportField} from '@/api/src/invoice'
import api from '@/api'
import { columns, INVOICESTATUS_TAB } from './const'
import DetailInvoice from './components/detail'
import NewPanel from './components/New'
import InfoEntry from './components/infoEntry'
import DetailContainer from '@/components/DetailContainer'
import ExportPanel from '@/components/exportFields'
import { SOTRE_KEY_FINANCIAL_INVOICE_LIST } from '@/model/tableStoreKey'

export default {
  name: 'InvoiceList',
  components: { DetailInvoice, NewPanel, InfoEntry, DetailContainer, ExportPanel },
  mixins: [tableMixin],
  data () {
    return {
      INVOICESTATUS_TAB,
      SOTRE_KEY_FINANCIAL_INVOICE_LIST,
      selectedNos: '',
      searchForm: {
        status: '1',
        number: '',
        startTime: '',
        endTime: '',
        invoiceType: '',
        saleId: '',
        openingInvoice: '',
        customerName: ''
      },
      statusBool: false,
      detailParams: {
        visible: false,
        obj: {}
      },
      newParams: {
        visible: false,
        obj: {}
      },
      entryParams: {
        visible: false,
        obj: {}
      },
      customerParams: {
        visible: false,
        obj: {}
      },
      extendDetailParams: {
        visible: false,
        id: '',
        businessId: '',
        type: ''
      },
      exportForm: {},
      exportParams: {visible: false},
      loading: false // 切换tab 重新加载table
    }
  },
  computed: {
    columns () {
      return columns(this)
    }
  },
  watch: {},
  created () {},
  methods: {
    exportApi () {
      return exportInvoice
    },
    exportField () {
      return exportField
    },
    tabChange () {
      this.loading = true
      this.statusBool = true
      this.searchForm.customerName = ''
      this.$nextTick(() => {
        this.loading = false
        this.statusBool = false
      })
    },
    onReset () {
      if (this.$refs.searchForm) {
        this.$refs.searchForm.resetFields()
        this.searchForm.startTime = ''
        this.searchForm.endTime = ''
        this.onSearch()
      }
    },
    async loadList () {
      const _res = await getpagelist(
        this.assignQuery(this.searchForm)
      )
      this.initialTableData(_res.list, _res.count)
    },
    saveIds (selection, row) {
      // 保存已选
      this.selectedNos = selection.map(item => item.id).join(',')
    },
    onAdd () {
      this.newParams = {
        visible: true,
        obj: {}
      }
    },
    onGetFields () {
      this.exportParams.visible = true
    },
    async onExport (fields) {
      this.exportForm = {
        ...this.searchForm,
        ...{ ids: this.selectedNos },
        ...{ fields: fields }
      }
      this.$refs.export.onExport()
    },
    onEdit (row) {
      this.newParams = {
        visible: true,
        obj: row
      }
    },
    onRecovery (row) {
      this.$prompt(
        '确定回收此发票，回收后此发票记录将作废，请慎重操作！',
        '回收',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: '请输入备注信息 , 必填项',
          inputType: 'textarea',
          inputPattern: /\S/,
          inputErrorMessage: '请输入备注'
        }
      )
        .then(async ({ value }) => {
          await recycleInvoice({ id: row.id, isRecycle: '2' })
          this.$message.success('回收成功')
          this.loadList()
        })
        .catch(() => {})
    },
    onExtendShow (id, type) {
      this.extendDetailParams = {
        visible: true,
        id: id,
        businessId: id,
        type: type
      }
    },
    onDel (row) {
      const text =
        row.status === '1'
          ? '确定删除待开票任务？将不可恢复'
          : '确定删除已开票记录，关联的销售单发票记录也会被删除，请慎重操作！'
      this.$confirm(text, '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await api.invoice.delete({ id: row.id })
          this.$message.success('删除成功')
          this.onSearch()
        })
        .catch(() => {})
    },
    onWrite (row) {
      this.entryParams = {
        visible: true,
        obj: row
      }
    },
    onDetail (row) {
      this.detailParams = {
        visible: true,
        obj: row
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>
